<template>
	<view class="">
		<u-popup :show="show" :round="10" mode="bottom" @close="close">
			<view>
				<view class="avatarUrl">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="avatarUrl" class="refreshIcon" v-if="avatarUrl"></image>
						<image src="/static/images/tab/mine_active.png" class="refreshIcon" v-else></image>
					</button>
				</view>
				<view class="nickname">
					<text>昵称：</text>
					<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
						@input="bindinput" />
				</view>
				<view class="bottom" @click="loginHandler">
					登录
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		checkLogin,
		checkAuth
	} from "@/utils/check.js"
	import utils from "@/utils/common.js"
	import storage from "@/utils/storage.js"
	import {
		getRolePage
	} from "@/api/role.js"
	import {
		login
	} from "@/api/user.js"
	export default {
		props: {
			shouldAuthor: {
				default: false
			}
		},
		data() {
			return {
				show: false,
				nickName: "",
				avatarUrl: ""
			}
		},
		methods: {
			//登录
			loginHandler() {
				if (!this.nickName) {
					uni.showToast({
						title: "请输入昵称",
						icon: "none"
					})
					return
				}
				if (!this.avatarUrl) {
					uni.showToast({
						title: "请选择头像",
						icon: "none"
					})
					return
				}
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event) => {
						login({
								code: event.code,
								name: this.nickName,
								head: this.avatarUrl
							})
							.then(res => {
								storage.set_token(res)
								//登陆成功,跳转到用户首页
								this.show = false
								this.$emit("success")
							})
							.catch(e => {
								uni.hideLoading()
							})
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			close() {
				this.show = false
			},
			bindblur(e) {
				this.nickName = e.detail.value;
			},
			bindinput(e) {
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.nickName = e.detail.value;
			},
			async onChooseavatar(e) {
				// this.avatarUrl = e.detail.avatarUrl;
				const result = await utils.uploadFileToOss(e.detail.avatarUrl)
				this.avatarUrl = result
			},
			validaLogin() {
				return new Promise(async (resolve, reject) => {
					if (!checkLogin()) {
						this.show = true
					} else if(this.shouldAuthor && !checkAuth()){
						//获取我的所有角色
						const result = await getRolePage()
						if((result || []).length == 0){
							//没有认证过角色
							uni.showModal({
								title: "还未认证",
								content: "现在去认证",
								success: (res) => {
									if(res.confirm){
										uni.navigateTo({
											url: "/pages/authentication/index"
										})
									}
								}
							})
							return
						}
						const data = (result || []).filter(item => item.audit_status == 1)[0]
						if(data){
							storage.set_user_role(data.role_type)
							resolve()
						}else{
							uni.showToast({
								title: "认证还未通过，请等待管理员审核",
								icon: "none"
							})
						}
					}else{
						resolve()
					}
				})

			},
			isAuth(){
				return checkAuth()
			},
			isLogin(){
				return checkLogin()
			}
		}
	}
</script>

<style scoped lang="scss">
	.avatarUrl {
		padding: 80rpx 0 40rpx;
		background: #fff;

		button {
			background: #fff;
			line-height: 80rpx;
			height: auto;
			width: auto;
			padding: 20rpx 30rpx;
			margin: 0;
			display: flex;
			justify-content: center;
			align-items: center;


			.refreshIcon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.jt {
				width: 14rpx;
				height: 28rpx;
			}
		}
	}

	// botton 去除边框
	button::after {
		border: none;
	}

	.nickname {
		background: #fff;
		padding: 20rpx 30rpx 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.weui-input {
			padding-left: 60rpx;
		}
	}


	.bottom {
		margin: 20rpx auto 40rpx;
		width: 527rpx;
		line-height: 86rpx;
		background: #2B5BF8;
		border-radius: 86rpx;
		font-weight: 500;
		font-size: 38rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>